<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>品牌大全列表详情</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script src="../utils/flexible.js"></script>
    <link rel="stylesheet" href="../css/brand.css">
</head>
<body>
    <header>
        <button>返回</button>
        <img src="../images/header_logo.png" alt="">
        <img src="../images/header_app.png" alt="">
    </header>
    <div class="search">
        <input type="text" placeholder="请输入你想比较的商品">
        <p>搜索</p>
    </div>
    
    <!-- 导航nav -->
    <div class="nav">
        <div class="left">
            <a href="../index.html">首页></a>
            <a href="./brandTitle.html">全部分类></a>
            <a href="./bijia.html">电视></a>
        </div>
        <a href="./bijia.html" class="right">筛选</a>

    </div>

    <!-- 列表ulall -->
    <ul class="ulall">

    </ul>



    <!-- 底部 -->
    <footer>
        <ul>
            <li>登录</li>
            <li>注册</li>
            <li class="returntop">返回顶部</li>
        </ul>
        <p>
            手机APP下载慢慢买手机版-掌上比价平台<br>
            m.manmanbuy.com
        </p>
    </footer>
    
</body>
</html>
<script>
    // 返回上一级
    let bn=document.querySelector('button');
    bn.addEventListener('click',function(){
        history.go(-1);
    })

    // 解析url
    let href = location.href;
    console.log(href);
    function getUrlParams(url) {
        //1.对url进行处理,把?号后面的参数匹配出来,使用正则进行匹配
        //http://127.0.0.1:5500/detail.html?id=20&age=99
        let reg = /^[^\s]+\?([^&\s\d]+=[^\s]+)*/
        let match = reg.exec(url)
        match = match[1]
        if (!match) {//表示没匹配到
            console.warn("没有匹配到相应的query参数")
            return null
        }
        // console.log(match);
        //对参数进行uri解码
        let queryString = decodeURI(match);
        console.log(queryString);
        //将queryString以"&"符号为分割点 切割成为一个数组
        let queryArr = queryString.split("&");
        // console.log(queryArr);
        let queryParamsObj = {}//用于存储处理好的query数据
        queryArr.forEach(item => {
            let itemArr = item.split("=") //对每个item 'id=20'这样的切割成['id','20']
            queryParamsObj[itemArr[0]] = itemArr[1]
        })
        // console.log(queryParamsObj);
        //将最终处理的结果返回
        return queryParamsObj
    }
    let qr = getUrlParams(href)
    console.log(qr);
    let brandtitleid=qr.brandid;
    console.log(brandtitleid,'传过来的参数id');
    

    //根据获取的productid向后端发送请求

    $.ajax({
        url: "http://chst.vip:1234/api/getbrandproductlist",
        data:{
                brandtitleid:brandtitleid,
                pagesize:10
            }
    })
    .then(res => {
        console.log(brandtitleid,"好了吗");
        console.log(res);
        data = res.result;
        let html=''
        data.forEach(item=>{
            html+=`
                <li productid=${item.productId}>
                    <span>${item.productImg}</span>
                    <div>
                        <h1>${item.productName}</h1>
                        <h2>${item.productPrice}<h2>
                        <h3>${item.productQuote}&nbsp;&nbsp;&nbsp;&nbsp;
                            ${item.productCom}</h3>
                    </div>
                       
                </li>
            `
            
        })
        $('.ulall').html(html)
        
        // 点击跳转
        $('.ulall').on('click','li',function(){
            let productid=$(this).attr('productid')
            location.href=`./productlist.html?productid=${productid}`
        })
    })

        // 返回顶部  
        $('footer .returntop').click(function(){
            document.documentElement.scrollTop=0;
        })
</script>